import { useNamespace } from '@ibiz-template/vue3-util';
import { IPanelField } from '@ibiz/model-core';
import { defineComponent, PropType } from 'vue';
import { PanelAppTitleController } from './panel-app-title.controller';
import './panel-app-title.scss';

export const PanelAppTitle = defineComponent({
  name: 'IBizPanelAppTitle',
  props: {
    modelData: {
      type: Object as PropType<IPanelField>,
      required: true,
    },
    controller: {
      type: PanelAppTitleController,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('panel-app-title');

    const c = props.controller;

    return {
      ns,
      c,
    };
  },
  render() {
    let iconVNode = null;
    const { icon, isSvg, caption } = this.c.state;
    if (icon) {
      if (isSvg) {
        iconVNode = <ion-icon class={this.ns.e('logo')} icon={icon} />;
      } else {
        iconVNode = (
          <span class={this.ns.e('logo')}>
            <img src={icon} />
          </span>
        );
      }
    }
    return (
      <div
        class={[
          this.ns.b(),
          !iconVNode ? this.ns.m('hidden_logo') : null,
          ...this.controller.containerClass,
        ]}
      >
        {iconVNode}
        <span class={this.ns.e('title')}>{caption}</span>
      </div>
    );
  },
});
export default PanelAppTitle;
